<!-- 车辆进场 -->
<template>
    <div>
        <el-form :rules="rules" :model="cars" label-width="120px" class="demo-ruleForm">
            <el-form-item label="请输入车牌号" prop="carId">
                <el-input v-model="cars.carId"  autocomplete="off"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm">wen儿wo喔wen儿wo喔</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { reactive} from 'vue';
import type { FormRules } from 'element-plus';
import {carIn} from "@/api/car";
import { ElMessage } from 'element-plus';
const cars = reactive({
    carId:""
})
// 自定义车牌校验
const validatePass = (rule: any, value: any, callback: any) => {
if (!/^\w{5,10}$/.test(value)) {
        callback(new Error("车牌号5-10位"));
    } else {
        callback();
    }
}
const rules = reactive<InstanceType<typeof FormRules>>({
    carId: [{ required: true, validator: validatePass, trigger: 'blur' }],
})
function submitForm(){
    carIn({
        carnumber:cars.carId
    }).then(resp=>{
        if (resp.data.code == 20000){
                 ElMessage({
                        message: '小车车来啦~',
                        type: 'success',
                    })
                    cars.carId = "";
                }
    })
}
</script>

<style scoped>

</style>